<template>
  <div class="report public">
    <div class="report-result">
      <div class="report-result-img">
        <img :src="mySelfImg" alt="" />
      </div>
      <div class="report-result-title">您的面相报告已生成</div>
      <div class="report-result-txt">输入个人信息领取报告</div>
      <div class="report-result-userinfo">
        <el-input class="report-result-userinfo-username" type="text" v-model="myName" placeholder="请输入昵称" />
        <div class="report-result-userinfo-userdate">
          <!-- <el-date-picker prefix-icon="none" v-model="myDate" class="report-result-userinfo-userdate-date" :editable="false" :clearable="false" type="date" placeholder="请选择您的出生年月日">
          </el-date-picker> -->
          <el-input class="report-result-userinfo-userdate-date" @focus="isShowBirth = true" type="text" placeholder="请选择您的出生年月日" v-model="myDate" />
          <img @click="isShowBirth = true" class="report-result-userinfo-userdate-icon" src="@/assets/img/down.png" alt="" />

          <van-popup v-model="isShowBirth" position="bottom" style="height: 50%" round>
            <van-datetime-picker @cancel="isShowBirth = false" @confirm="confirmFn" title="请选择您的出生年月日" type="date" v-model="myDate" />
          </van-popup>
        </div>
      </div>
      <el-button class="report-result-btn" @click="getReport">领取报告</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mySelfImg: require('@/assets/img/photograph_pic.png'),
      myDate: '',
      myName: '',
      isShowBirth: false
    };
  },
  methods: {
    getReport() {
      this.$router.push('/getReport');
    },
    confirmFn() {
      this.isShowBirth = false;
      this.$nextTick(() => {
        this.myDate = this.$moment(this.myDate).format('YYYY-MM-DD');
      });
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .van-popup--bottom {
  width: 10rem !important;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .el-input__inner {
  background-color: #1b1b2c;
  border-radius: 33px;
  border: none;
  color: #fff;
  height: 1.333333rem;
  outline: none;
  padding: 0 15px;
}
::v-deep .el-input__inner::placeholder {
  color: #667575;
}
.report {
  background-image: url('@/assets/img/write_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  &-result {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 90%;
    background: #1b1b2c;
    border-radius: 0.213333rem;
    margin-top: 1.866667rem;
    margin-bottom: 1rem;
    &::after {
      position: absolute;
      top: -0.52rem;
      left: 0.786667rem;
      content: '';
      width: 0.373333rem;
      height: 0.933333rem;
      background: url('@/assets/img/link.png');
      background-size: 100% 100%;
    }
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      content: '';
      width: 1.893333rem;
      height: 2.12rem;
      background: url('@/assets/img/result_subscript.png');
      background-size: 100% 100%;
    }
    &-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3.813333rem;
      height: 3.813333rem;
      background-size: 100% 100%;
      margin-top: 1.233333rem;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    &-title {
      height: 0.773333rem;
      font-size: 0.533333rem;
      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
      font-weight: 700;
      color: #1ffbbb;
      line-height: 0.773333rem;
      text-align: center;
      margin-top: 0.5rem;
    }
    &-txt {
      height: 0.666667rem;
      font-size: 0.373333rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #c5c9d1;
      line-height: 0.666667rem;
      text-align: center;
    }
    &-userinfo {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-top: 0.666667rem;
      width: 100%;
      &-username {
        margin-bottom: 0.48rem;
        background-color: transparent;
        width: 90%;
        height: 1.333333rem;
        margin: auto;
        border-radius: 0.666667rem;
        border: 0.013333rem solid #777c87;
        font-size: 0.426667rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #fff;
        outline: none;
      }
      &-userdate {
        position: relative;
        cursor: pointer;
        width: 90%;
        margin: auto;
        margin-top: 0.3rem;
        &-date {
          margin-bottom: 0.48rem;
          background-color: transparent;
          width: 100%;
          height: 1.333333rem;
          border-radius: 0.666667rem;
          border: 0.013333rem solid #777c87;
          font-size: 0.426667rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #fff;
          outline: none;
          cursor: pointer;
        }
        &-icon {
          position: absolute;
          top: 0.84rem;
          right: 0.466667rem;
          width: 0.306667rem;
          height: 0.173333rem;
        }
      }
    }
    &-btn {
      width: 90%;
      height: 1.28rem;
      background: #1ffbbb;
      border-radius: 0.693333rem;
      font-size: 0.48rem;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 600;
      color: #333;
      margin-top: 0.32rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
